<template>
  <div>
    <a-page-header
      style="border: 1px solid rgb(235, 237, 240); background: #fff"
      :title="批次流程"
      :ghost="false"
      sub-title="批次流程"
      @back="
        () => {
          goodsInfo = {};
          this.$router.replace({ name: 'ProductBatchList' });
        }
      "
    >
      <template slot="extra">
        <a-button @click="handleProductBatchDelete">删除批次</a-button>
        <a-button  @click="handleProductBatchEdit">编辑批次</a-button>
        <a-button type="primary" @click="onAdd" icon="plus">新增步骤</a-button>
      </template>
      <div class="content">
        <div class="main">
          <a-descriptions size="small" :column="2">
            <a-descriptions-item label="产品名称">
              {{ product_batch.product_name ? product_batch.product_name : "" }}
            </a-descriptions-item>
            <a-descriptions-item label="批次名称">
              {{ product_batch.batch_name ? product_batch.batch_name : "" }}
            </a-descriptions-item>
            <a-descriptions-item label="批次编号">
              {{ product_batch.batch_number ? product_batch.batch_number : "" }}
            </a-descriptions-item>
            <a-descriptions-item label="操作时间">
              {{
                product_batch.updated_at
                  ? product_batch.updated_at
                  : "" | timeFormat
              }}
            </a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
    </a-page-header>
    <div>
      <a-card :bordered="false" class="card_style_re">
        <div class="table-operator flex-y-center flex-x-sb">
          <div>
            <a-dropdown>
              <a-menu slot="overlay">
                <a-menu-item @click="allChangeStatus('delete')"
                  >批量删除</a-menu-item
                >
              </a-menu>
              <a-button> 批量操作 </a-button>
            </a-dropdown>
          </div>
        </div>
        <div v-show="selectedRowKeys.length" class="select-title">
          <a-alert
            :message="`已选择 ${selectedRowKeys.length} 项`"
            type="info"
            show-icon
          />
        </div>
        <!-- <a-divider /> -->
        <s-table
          :row-selection="{
            selectedRowKeys: selectedRowKeys,
            onChange: onSelectChange,
          }"
          rowKey="id"
          size="default"
          :columns="columns"
          :data="loadData"
          ref="table"
        >
          <span slot="created_at" slot-scope="text">{{
            text | timeFormat
          }}</span>
          <span slot="action" slot-scope="text, record">
            <a-button type="link" @click="handleEdit(record)" size="small"
              >编辑</a-button
            >
            <a-divider type="vertical" />
            <a-dropdown>
              <a class="ant-dropdown-link"> 更多 <a-icon type="down" /> </a>
              <a-menu slot="overlay">
                <a-menu-item>
                  <a
                    href="javascript:;"
                    @click="productBatchProcessLogList(record)"
                    >查看记录</a
                  >
                </a-menu-item>

                <a-menu-item>
                  <a href="javascript:;" @click="handleDelete(record)">删除</a>
                </a-menu-item>
              </a-menu>
            </a-dropdown>
          </span>
        </s-table>

        <a-modal
          :title="isNew ? '新增产品批次' : '编辑产品批次'"
          :width="1000"
          :confirm-loading="modalLoading"
          :mask-closable="false"
          :destroy-on-close="true"
          v-model="visible"
          @ok="handleOk"
        >
          <a-form class="permission-form" :form="form">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              style="display: none"
              label="主键"
              hasFeedback
            >
              <a-input
                placeholder="主键"
                :disabled="!isNew"
                v-decorator="['id']"
              />
            </a-form-item>
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="流程名称"
              hasFeedback
            >
              <a-input
                placeholder="流程名称"
                v-decorator="[
                  'process_name',
                  { rules: [{ required: true, message: '请填写流程名称' }] },
                ]"
              />
            </a-form-item>
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="排序"
              hasFeedback
            >
              <a-input
                placeholder="请输入排序"
                v-decorator="[
                  'sort',
                  { rules: [{ required: true, message: '请填写排序' }] },
                ]"
              />
            </a-form-item>
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="操作人员"
              extra=""
            >
              <a-input-search
                @search="selectRecordModal"
                placeholder="选择操作人员"
                :readOnly="true"
                v-decorator="[
                  'name',
                  { rules: [{ required: true, message: '请选择操作人员' }] },
                ]"
              >
                <a-button @click="selectRecordModal" slot="enterButton"
                  >+</a-button
                >
              </a-input-search>
              <a-input hidden v-decorator="['process_user_id']" />
            </a-form-item>
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="表单设置"
            >
              <div class="add" style="width: 100%">
                <a-select
                  v-model="addType"
                  style="width: 468px; padding-right: 7px"
                >
                  <a-select-option value="text"> 单行文本 </a-select-option>
                  <a-select-option value="textarea"> 多行文本 </a-select-option>
                  <a-select-option value="time"> 时间选择器 </a-select-option>
                  <a-select-option value="date"> 日期选择器 </a-select-option>
                  <a-select-option value="radio"> 单选 </a-select-option>
                  <a-select-option value="checkbox"> 多选 </a-select-option>
                  <a-select-option value="uploadImg">
                    图片上传
                  </a-select-option>
                  <a-select-option value="uploadVideo">
                    视频上传
                  </a-select-option>
                </a-select>

                <div class="add-action" @click="addList">
                  <a-icon type="plus" />
                </div>
                <!-- <a-button type="primary" style="margin-left: 20px" @click="addList">添加一个字段</a-button> -->
              </div>

              <div class="table">
                <div class="table-body">
                  <a-row class="title self-th">
                    <a-col :span="4" style="text-align: left"> 类型 </a-col>
                    <a-col :span="4" style="text-align: left"> 名称 </a-col>
                    <a-col :span="4" style="text-align: left"> 提示语 </a-col>
                    <a-col :span="6" style="text-align: left"> 默认值 </a-col>
                    <a-col :span="2" style="text-align: left"> 必填 </a-col>
                    <a-col :span="4" style="text-align: left"> 位置 </a-col>
                  </a-row>
                  <div class="list" @dragover.prevent>
                    <a-row
                      class="item tr-row"
                      v-for="(item, index) in goods_form.form_list"
                      :key="index"
                      :draggable="true"
                      v-dragging="{
                        item: item,
                        list: goods_form.form_list,
                        group: 'row',
                      }"
                    >
                      <a-col :span="4" style="text-align: left">
                        {{
                          item.type == "text"
                            ? "单行文本"
                            : item.type == "textarea"
                            ? "多行文本"
                            : item.type == "time"
                            ? "时间选择器"
                            : item.type == "date"
                            ? "日期选择器"
                            : item.type == "radio"
                            ? "单选"
                            : item.type == "checkbox"
                            ? "多选"
                            : item.type == "uploadImg"
                            ? "图片上传"
                            : item.type == "uploadVideo"
                            ? "视频上传"
                            : ""
                        }}
                      </a-col>
                      <a-col :span="4" style="text-align: left">
                        <a-input
                          style="width: 100%"
                          v-model="item.name"
                        ></a-input>
                      </a-col>
                      <a-col :span="4" style="text-align: left">
                        <a-input
                          style="width: 100%"
                          v-model="item.tip"
                          :placeholder="
                            item.type == 'uploadImg' ? '请选择图片' : item.type == 'uploadVideo' ? '请选择视频' : ''
                          "
                          v-if="
                            item.type == 'text' ||
                            item.type == 'textarea' ||
                            item.type == 'uploadImg' ||
                            item.type == 'uploadVideo' 
                          "
                        ></a-input>
                      </a-col>
                      <a-col :span="6" style="text-align: left">
                        <a-input
                          v-if="
                            item.type == 'text' ||
                            item.type == 'textarea' ||
                            item.type == 'radio' ||
                            item.type == 'checkbox'
                          "
                          v-model="item.default"
                        ></a-input>
                        <a-time-picker
                          v-model="item.default"
                          v-if="item.type == 'time'"
                          style="max-width: 100%"
                          valueFormat="HH:mm:ss"
                        />
                        <a-date-picker
                          v-model="item.default"
                          v-if="item.type == 'date'"
                          valueFormat="YYYY-MM-DD"
                        />
                        <p
                          v-if="item.type == 'radio' || item.type == 'checkbox'"
                          class="tip"
                          style="color: #888"
                        >
                          多个请用英文 , 分开
                        </p>
                        <p
                          v-if="item.type == 'radio' || item.type == 'checkbox'"
                          class="tip"
                          style="color: #d9534f"
                        >
                          注:第一个值默认选中
                        </p>
                      </a-col>
                      <a-col :span="2" style="text-align: left">
                        <a-checkbox
                          :checked="
                            item.required == 1
                              ? true
                              : item.required == 0
                              ? false
                              : ''
                          "
                          @change="(e) => changeChecked(e, index)"
                        ></a-checkbox>
                      </a-col>
                      <a-col :span="4" style="text-align: left">
                        <a-button
                          type="danger"
                          size="small"
                          @click="deleteItem(index)"
                          >删除</a-button
                        >
                        <a-icon
                          type="unordered-list"
                          style="cursor: move; margin-left: 5px"
                        />
                      </a-col>
                    </a-row>
                  </div>
                </div>
              </div>
              <div class="warning">注：名称最好不要超过4个中文字</div>
            </a-form-item>
          </a-form>
        </a-modal>
      </a-card>
    </div>

    <a-modal
      title="选择用户"
      style="width: 300px"
      v-model="visibles"
      :destroyOnClose="true"
      :footer="null"
    >
      <div style="margin-bottom: 10px">
        <a-input-search
          placeholder="输入昵称搜索"
          v-model="keyword"
          allowClear
          enter-button
          @search="onSearch"
        />
      </div>
      <s-table
        ref="tables"
        rowKey="id"
        :columns="columnss"
        :data="loadDatas"
        :dataSource="dataSource"
      >
        <span slot="baseinfo" slot-scope="text, record">
          <img
            style="
              width: 40px;
              heigth: 40px;
              border-radius: 3px;
              margin-right: 5px;
            "
            :src="record.avatar"
          />
          <span :length="20" tooltip>{{ record.name }}</span>
        </span>
        <span slot="action" slot-scope="text, record">
          <a-button type="primary" size="small" @click="onSelect(record)">
            选择
          </a-button>
        </span>
      </s-table>
    </a-modal>


    <a-modal
        :title="'编辑产品批次'"
        :width="800"
        :confirm-loading="productBatchModalLoading"
        :mask-closable="false"
        :destroy-on-close="true"
        v-model="product_batch_visible"
        @ok="handleProductBatchOk"
      >
        <a-form class="permission-form" :form="product_batch_form">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" style="display: none" label="主键" hasFeedback>
            <a-input placeholder="主键" disabled="true" v-decorator="['id']" />
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="选择产品">
             <a-input
              hidden
              v-decorator="['product_id']"
            />
            <a-select
              style="width: 400px"
              placeholder="选择产品"
               v-decorator="['product_name']"
              @change="handleProductChange($event)"
            >
            <!-- :default-value="product_id" -->
              <a-select-option :value="res.id" v-for="(res, index) of product_list" :key="index">{{ res.product_name }}</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="批次名称" hasFeedback>
            <a-input
              placeholder="批次名称"
              v-decorator="['batch_name', { rules: [{ required: true, message: '请填写批次名称' }] }]"
            />
          </a-form-item>
          <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="添加商品"
          extra=""
        >
          <a-input-search
            @search="selectGoodsModal"
            placeholder="选择商品"
            :readOnly="true"
            v-decorator="['goods_name']"
          >
            <a-button @click="selectGoodsModal" slot="enterButton">选择商品</a-button>
          </a-input-search>
           <a-input
              hidden
              v-decorator="['goods_id']"
            />
          <div v-if="goods_list && goods_list.length > 0" style="width: 100%">
            <div style="float: left; width: 60px; margin: 5px 10px" v-for="(item, index) in goods_list" :key="index">
              <div style="width: 100%; height: 60px">
                <img width="100%" height="100%" :src="item.cover_pic" alt="" />
              </div>
              <div style="width: 100%; text-align: center; overflow: hidden; height: 40px">{{ item.name }}</div>
            </div>
          </div>
        </a-form-item>

        </a-form>
      </a-modal>
       <SelectGoods v-model="select_goods_visible" @onOk="selectGoodsOk"></SelectGoods>
  </div>
</template>

<script>
import pick from "lodash.pick";
import { STable } from "@/components";
import SelectGoods from "@/components/SearchGoods/index";
import {
  getProductBatchProcessList,
  productBatchProcessEdit,
  delProductProcessBatch,
  productBatchProcessOperate,
} from "@/api/plugin/product_traceability/productBatchProcess";
import NoBorderRadio from "@/components/NoBorderRadio/NoBorderRadio";
import { storeUserList } from '@/api/user'
import {productBatchEdit,delProductBatch,getProductList, } from '@/api/plugin/product_traceability/productBatch';
import storage from "store";

var old_form_list = [];
const STATUS = {
  0: "禁用",
  1: "启用",
};
const columnss = [
  {
    title: "ID",
    dataIndex: "id",
  },
  {
    title: "用户信息",
    scopedSlots: { customRender: "baseinfo" },
  },
  {
    title: "操作",
    scopedSlots: { customRender: "action" },
  },
];
const columns = [
  {
    title: "ID",
    dataIndex: "id",
  },
  {
    title: "流程",
    dataIndex: "process_name",
  },
  {
    title: "操作员",
    dataIndex: "name",
  },
  {
    title: "排序",
    dataIndex: "sort",
  },
  {
    title: "操作",
    width: "150px",
    dataIndex: "action",
    scopedSlots: { customRender: "action" },
  },
];

export default {
  name: "ProductBatchProcessList",
  components: {
    STable,
    NoBorderRadio,
    SelectGoods,
  },
  data() {
    return {
      keyword: '',
      loadDatas: (parameter) => {
        return storeUserList({
          ...parameter,
           storeId: storage.get('storeId'),
          type: "user",
          keyword: this.keyword,
        }).then((res) => {
          return res.data;
        });
      },
      columnss,
      dataSource: [],
      goods_form: {
        is_form: "",
        form_name: "",
        form_list: [],
      },
      addType: "text",
      visibles: false,
      product_batch: [],
      product_list: [],
      select_goods_visible: false,
      choosedGood: null,
      selectedRowKeys: [],
      isNew: false,
      visible: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      form: this.$form.createForm(this),
      // 表头
      columns,
      // 权限树
      permissionTree: [],
      modalLoading: false,
      defaultCheckedKeys: [],
      statusSelectValue: 1,
      // 查询条件参数
      queryParam: {
        search_product_name_key: null,
        search_batch_name_key: null,
        search_goods_name_key: null,
        dateStart: null,
        dateEnd: null,
        search_state: -1,
      },
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        // Object.assign(parameter, this.queryParam)
        return getProductBatchProcessList({
          product_batch_id: this.product_batch_id,
        }).then((res) => {
          console.log("getProductBatchProcessList", res);
          this.product_batch = res.data.product_batch;
          // res.state = parseInt(res.state);

          return res.data;
        });
      },

      batch_name: "",
      user_item_name: "",
      user_item: "",
      product_batch_visible: false,
      product_batch_form: this.$form.createForm(this),
      productBatchModalLoading: false,
    };
  },
  computed: {
    product_batch_id() {
      if (this.$route.query.product_batch_id) {
        return JSON.parse(this.$route.query.product_batch_id);
      } else {
        return {};
      }
    },
  },
  filters: {
    statusFilter(key) {
      return STATUS[key];
    },
  },
  created(e) {
    // this.getProductList();
  },
  activated() {
    this.$refs.table.refresh();
  },
  methods: {
    deleteItem(index) {
      console.log(index);
      this.goods_form.form_list.splice(index, 1);
    },
    onSelect: function (item) {
      console.log(item, "选择的人员");
      this.visibles = false;
      this.user_item = item;
     
       this.$nextTick(() => {
          this.form.setFieldsValue({
            process_user_id: item.id,
            name: item.name,
          })
        })
      
    },
    selectRecordModal() {
      this.visibles = !this.visibles;
      // this.getListData();
    },
    // 获取用户列表数据
    getListData(params) {
      let reqPrams = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        store_id: storage.get("storeId") || 1,
        keyword: this.searchVal,
        ...params,
      };
      storeUserList(reqPrams).then((res) => {
        console.log("用户数据", res);
        if (!res.code) {
          this.dataSource = res.data.data;
          this.totalCount = res.data.totalCount;
        }
      });
    },
    addList() {
      this.goods_form.form_list.push({
        type: this.addType,
        name: "",
        tip: "",
        required: "0",
        sort: "0",
        is_delete: "0",
      });
    },
    onSearch: function () {
      this.$refs.tables.refresh(true);
    },
    calendarChange(date, dateString) {
      this.selectDate = date[0];
    },
    onChange(date, dateString) {
      this.queryParam.dateStart = dateString[0];
      this.queryParam.dateEnd = dateString[1];
    },
    changeTab(val) {
      if (val == 1) {
        this.$router.push({ name: "ProductList" });
      }
      if (val == 2) {
        this.$router.push({ name: "ProductBatchList" });
      }
      if (val == 3) {
        this.$router.push({ name: "ProductBatchProcessLogList" });
      }
    },
    onOptionChange() {
      this.$refs.table.refresh();
    },

    handleEdit(record) {
     
      old_form_list = record.sheet_list ? JSON.parse(JSON.stringify(record.sheet_list)) : [];
      this.goods_form.form_list = record.sheet_list;
      this.isNew = false;
      this.visible = true;
      // this.goods_list = record.goods_list;
      record.state = parseInt(record.state);
      this.$nextTick(() => {
        this.form.setFieldsValue(
          pick(record, ["sort", "process_user_id", "name", "process_name", "id"])
        );
      });
    },
    resetQueryParams() {
      Object.assign(this.queryParam, {
        search_product_name_key: null,
        search_batch_name_key: null,
        search_goods_name_key: null,
        dateStart: null,
        dateEnd: null,
        search_state: -1,
      });
      this.$refs.table.refresh(true);
    },
    changeChecked(e, index) {
      const checked = e.target.checked ? 1 : 0;
      console.log(this.goods_form.form_list);
      this.goods_form.form_list[index].required = checked;
    },
    handleOk(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (err) {
          return false;
        }

        if(this.goods_form.form_list.length == 0){
             this.$error({
                content: "请填写表单设置",
              });
              return
        }
        this.modalLoading = true;
        var str1 = JSON.stringify(old_form_list);
        var str2 = JSON.stringify(this.goods_form.form_list);
        var parameter = {
          process_name: values.process_name,
          sort: values.sort,
          process_user_id: values.process_user_id,
          product_batch_id: this.product_batch_id,
          is_change_sheet:  values.id > 0 && str1 != str2 ? 1 : 0,
          form_list: this.goods_form.form_list,
          id: values.id,
        };

        productBatchProcessEdit(parameter)
          .then((res) => {
            console.log(res);
            this.modalLoading = false;
            if (res.code !== 0) {
              this.$error({
                content: res.msg,
              });
            } else {
              this.$message.success(res.msg);
              this.visible = false;
              this.$refs.table.refresh();
            }
          })
          .catch((err) => {
            this.$message.error(err.message);
            this.modalLoading = false;
          });
      });
    },
    onAdd: function () {
      this.isNew = true;
      this.visible = true;
      this.defaultCheckedKeys = [];
      this.goods_form.form_list = [];
    },
    handleDelete: function (record) {
      this.$confirm({
        title: "是否删除该条数据?",
        onOk: () => {
          const hide = this.$message.loading("删除中...", 0);
          delProductProcessBatch({
            id: record.id,
          })
            .then((res) => {
              hide();
              if (res.code === 0) {
                this.$message.success(res.msg);
                this.$refs.table.refresh();
              } else {
                this.$error({
                  content: res.msg,
                });
              }
            })
            .catch((err) => {
              this.$message.error(err.message);
              hide();
            });
        },
        onCancel() {},
      });
    },
    onSelectChange(val) {
      this.selectedRowKeys = val;
    },

    // 批量操作员工
    allChangeStatus(e) {
      let that = this;
      let text =
        e == "open"
          ? "启用"
          : e == "disabled"
          ? "禁用"
          : e == "delete"
          ? "删除"
          : "";
      if (this.selectedRowKeys.length) {
        let type = e;
        let status =
          e == "open" ? 1 : e == "disabled" ? 0 : e == "delete" ? 1 : "";
        let param = {
          id: that.selectedRowKeys,
          type,
          status,
        };
        this.$confirm({
          title: "是否批量" + text,
          onOk() {
            that.change(param);
          },
          onCancel() {},
        });
      }
    },

    async change(param) {
      let that = this;
      const res = await productBatchProcessOperate(param);
      if (res.code == 0) {
        this.$message.success(res.msg);
        this.$refs.table.refresh();
      }
    },

    handleProductChange(value) {
      // this.product_id = value
      this.form.setFieldsValue({
        product_id: value,
      });
    },

    selectGoodsModal() {
      this.select_goods_visible = !this.select_goods_visible;
    },

    selectGoodsOk(e) {
      // var id = []
      // for (var i in e) {
      //   id.push(parseInt(e[i].id))
      // }
      this.goods_list = e;
      this.$nextTick(() => {
        this.product_batch_form.setFieldsValue({
          // goods_id: JSON.stringify(id)
          goods_id: e[0].id,
          goods_name: e[0].name,
        });
      });
    },

    productBatchProcessList(record) {
      this.$router.replace({
        name: "ProductBatchProcessList",
        query: { id: record.id },
      });
    },
    productBatchProcessLogList(record) {
      this.$router.push({
        name: "ProductBatchProcessLogList",
        query: {  product_batch_id: this.product_batch_id, product_batch_process_id: record.id },
      });
    },


    handleProductBatchEdit() {
      this.product_batch_visible = true
      this.goods_list = this.product_batch.goods_list
      // record.state = parseInt(record.state)
      // this.$nextTick(() => {
      //   this.form.setFieldsValue(pick(record, ['batch_number', 'batch_name', 'product_name', 'goods_name', 'state', 'goods_id', 'product_id']))
      // })

      this.$nextTick(() => {
        this.product_batch_form.setFieldsValue({
          batch_number: this.product_batch.batch_number, 
          batch_name:  this.product_batch.batch_name, 
          product_name:  this.product_batch.product_name, 
          goods_name:  this.product_batch.goods_name, 
          goods_id:  this.product_batch.goods_id, 
          product_id:  this.product_batch.product_id, 
          id:  this.product_batch.id, 
        })
      })
    },
     handleProductBatchOk (e) {
      e.preventDefault()
      this.product_batch_form.validateFields((err, values) => {
        if (err) {
          return false
        }
       
        this.productBatchModalLoading = true
     
        productBatchEdit(values)
          .then((res) => {
            console.log(res)
            this.productBatchModalLoading = false
            if (res.code !== 0) {
              this.$error({
                content: res.msg
              })
            } else {
              this.$message.success(res.msg)
             
              this.product_batch_visible = false
              this.$refs.table.refresh()
            }
          })
          .catch((err) => {
            this.$message.error(err.message)
            this.productBatchModalLoading = false
          })
      
      })
    },
    handleProductBatchDelete() {
   
     this.$confirm({
        title: '是否删除批次?',
        onOk: () => {
            const hide = this.$message.loading('删除中...', 0)
            delProductBatch({
              id: this.product_batch.id
            })
            .then((res) => {
              hide()
              if (res.code === 0) {
                this.$message.success(res.msg)
                 this.$router.push({ name: "ProductBatchList" });
              } else {
                this.$error({
                  content: res.msg
                })
              }
            })
            .catch((err) => {
              this.$message.error(err.message)
              hide()
            })
        },
        onCancel() {},
      })
    },
    getProductList() {
      getProductList().then((res) => {
        if (res.code == 0) {
          this.product_list = res.data.data
        } else {
          this.$message.error(res.msg)
        }
      })
    },
  },
  
};
</script>

<style lang="less" scoped>
.add {
  display: inline-block;
  position: relative;
  .add-action {
    position: absolute;
    left:461px;
    right: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    /* height: 29px; */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    border: 1px solid #d9d9d9;
    cursor: pointer;
    border-left: 0;
  }
}
.table {
  width: 100%;
  margin-top: 36px;
  padding: 10px 12px;

  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.14901960784313725);
  opacity: 1;
  border-radius: 4px;
  .table-body {
    .ant-row {
      min-height: 54px;
      opacity: 1;
      border-radius: 4px 4px 0px 0px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #e8e8e8;
    }
    .self-th {
      background: #fafafa;
    }
  }
  .title {
    .ant-col {
      text-align: center;
      padding: 0 10px;
      font-size: 14px;
      font-family: PingFangSC-Medium;
      line-height: 22px;
      color: rgba(0, 0, 0, 0.85);
    }
  }
}
.coupon-status-1,
.coupon-status-2 {
  &::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background: #c6c6c6;
    border-radius: 50%;
    margin-right: 8px;
    transform: translateY(-2px);
  }
}
.coupon-status-2 {
  &::before {
    background: rgb(109, 228, 125);
  }
}

.permission-form {
  /deep/ .permission-group {
    margin-top: 0;
    margin-bottom: 0;
  }
}
</style>
